<?php

/*----------------------------------------------------------------------------/
* @Author		KulerThemes.com http://www.kulerthemes.com
* @Copyright	Copyright (C) 2012 - 2013 KulerThemes.com. All rights reserved.
* @License		KulerThemes.com Proprietary License
/-----------------------------------------------------------------------------*/

?>

<?php echo $header; ?>
<?php if (isset($ksb_building_mode)) { ?>
    <style type="text/css">
        #header, .breadcrumb, .box > .heading .buttons,.vtabs, #footer {
            display: none !important;
        }

        #content {
            padding: 0 !important;
        }

        .box > .content {
            background: none !important;
        }

        .vtabs-content {
            padding-left: 15px !important;
        }
    </style>
<?php } ?>
    <script type="text/javascript">
        <?php if (isset($ksb_updated_module)) { ?>
        var ksb_updated_module = <?php echo $ksb_updated_module; ?>;
        <?php } ?>
    </script>

    <div id="content" class="kuler-module">
    <div class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
            <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
        <?php } ?>
    </div>
    <?php if ($error_warning) { ?>
        <div class="warning"><?php echo $error_warning; ?></div>
    <?php } ?>
    <div class="box">
    <div class="heading clearafter">
        <h1><img src="./view/kulercore/images/logos/kuler_social_icons.png" alt="<?php echo $heading_title; ?>" /></h1>
        <div class="buttons">
            <a onclick="$('#form').submit();" class="button save-settings"><?php echo $button_save; ?></a>
            <a onclick="$('#op').val('close'); $('#form').submit();" class="button cancel-settings"><?php echo $button_close; ?></a>
            <a href="<?php echo $cancel; ?>" class="button cancel-settings"><?php echo $button_cancel; ?></a>
        </div>
    </div>
    <div class="content">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form" class="clearafter">
    <input type="hidden" name="tab" id="tab" value="<?php echo $tab ?>" />
    <input type="hidden" name="op" id="op" />

    <div style="margin: 20px 0 0 30px;">
        <label><?php echo $__['entry_store']; ?></label>
        <select name="store_id" id="StoreSelector">
            <?php foreach ($stores as $store_id => $store_name) { ?>
                <option value="<?php echo $store_id; ?>"<?php if ($store_id == $selected_store_id) echo ' selected="selected"'; ?>><?php echo $store_name; ?></option>
            <?php } ?>
        </select>
    </div>

    <ul class="vtabs">
        <?php $module_row = 1; ?>
        <?php foreach ($modules as $module) { ?>
            <li>
                <a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
                    <?php echo $module['main_title']; ?>
                    <img class="remove-element" src="view/kulercore/images/icons/icon-delete.png" alt="" onclick="$('.vtabs a:first').trigger('click'); $('#module-<?php echo $module_row; ?>').remove(); $('#tab-module-<?php echo $module_row; ?>').remove(); return false;" />
                </a>
            </li>
            <?php $module_row++; ?>
        <?php } ?>
        <li><span id="module-add" class="module-add"><?php echo $button_add_module; ?>&nbsp;<img class="add-element" src="view/kulercore/images/icons/icon-add.png" alt="" onclick="addModule();" /></span></li>
    </ul>
    <?php $module_row = 1; ?>
    <?php foreach ($modules as $module) { ?>
        <div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content">
            <table class="form" style="margin-bottom: 0px;">
                <tr>
                    <td><?php echo $entry_status; ?></td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][status]"<?php echo $module['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_showtitle; ?></td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][show_title]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][show_title]"<?php echo $module['show_title'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_title; ?></td>
                    <td>
                        <?php foreach ($languages as $language) { ?>
                            <p>
                                <input type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][module_title][<?php echo $language['language_id']; ?>]" value="<?php echo $module['module_title'][$language['language_id']]; ?>"<?php if ($language['language_id'] == $config_admin_language_id) { ?> class="ModuleTitle" data-shortcode="#ModuleShortCode_<?php echo $module_row; ?>"<?php } ?> />
                                <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" />
                            </p>
                        <?php } ?>
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_shortcode; ?></td>
                    <td>
                        <input type="text" id="ModuleShortCode_<?php echo $module_row; ?>" class="ModuleShortCode" name="kuler_social_icons_module[<?php echo $module_row; ?>][shortcode]" value="<?php if (isset($module['shortcode'])) echo $module['shortcode']; ?>" readonly="readonly" size="40" />
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_layout; ?></td>
                    <td><select name="kuler_social_icons_module[<?php echo $module_row; ?>][layout_id]">
                            <?php foreach ($layouts as $layout) { ?>
                                <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                                    <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                                <?php } else { ?>
                                    <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                                <?php } ?>
                            <?php } ?>
                        </select></td>
                </tr>
                <tr>
                    <td><?php echo $entry_position; ?></td>
                    <td><select name="kuler_social_icons_module[<?php echo $module_row; ?>][position]">
                            <?php if ($module['position'] == 'content_top') { ?>
                                <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                            <?php } else { ?>
                                <option value="content_top"><?php echo $text_content_top; ?></option>
                            <?php } ?>
                            <?php if ($module['position'] == 'content_bottom') { ?>
                                <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                            <?php } else { ?>
                                <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                            <?php } ?>
                            <?php if ($module['position'] == 'column_left') { ?>
                                <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                            <?php } else { ?>
                                <option value="column_left"><?php echo $text_column_left; ?></option>
                            <?php } ?>
                            <?php if ($module['position'] == 'column_right') { ?>
                                <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                            <?php } else { ?>
                                <option value="column_right"><?php echo $text_column_right; ?></option>
                            <?php } ?>
                        </select></td>
                </tr>
            </table>
            <table class="form">
                <tr>
                    <td><?php echo $entry_icon_style ?></td>
                    <td colspan="2">
                        <label for="icon_style_<?php echo $module_row ?>_1"><input type="radio" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_style]" id="icon_style_<?php echo $module_row ?>_1" value="1"<?php if (isset($module['icon_style']) && $module['icon_style'] == 1 || !isset($module['icon_style'])) echo ' checked="checked"'; ?> /> Style 1</label> &nbsp;
                        <label for="icon_style_<?php echo $module_row ?>_2"><input type="radio" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_style]" id="icon_style_<?php echo $module_row ?>_2" value="2"<?php if (isset($module['icon_style']) && $module['icon_style'] == 2) echo ' checked="checked"'; ?> /> Style 2</label> &nbsp;
                        <label for="icon_style_<?php echo $module_row ?>_3"><input type="radio" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_style]" id="icon_style_<?php echo $module_row ?>_3" value="3"<?php if (isset($module['icon_style']) && $module['icon_style'] == 3) echo ' checked="checked"'; ?> /> Style 3</label> &nbsp;
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_icon_size ?></td>
                    <td colspan="2">
                        <label for="icon_size_<?php echo $module_row ?>_24"><input type="radio" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_size]" id="icon_size_<?php echo $module_row ?>_24" value="24"<?php if (isset($module['icon_size']) && $module['icon_size'] == 24 || !isset($module['icon_style'])) echo ' checked="checked"'; ?> /> 24</label> &nbsp;
                        <label for="icon_size_<?php echo $module_row ?>_32"><input type="radio" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_size]" id="icon_size_<?php echo $module_row ?>_32" value="32"<?php if (isset($module['icon_size']) && $module['icon_size'] == 32) echo ' checked="checked"'; ?> /> 32</label> &nbsp;
                        <label for="icon_size_<?php echo $module_row ?>_48"><input type="radio" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_size]" id="icon_size_<?php echo $module_row ?>_48" value="48"<?php if (isset($module['icon_size']) && $module['icon_size'] == 48) echo ' checked="checked"'; ?> /> 48</label> &nbsp;
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_icon_color; ?></td>
                    <td>
                        <div class="color-picker-container">
                            <div class="color-picker ColorPicker" data-background-color="#IconColor_<?php echo $module_row; ?>" data-default-color="<?php if (isset($module['icon_color'])) echo $module['icon_color']; ?>">
                                <div<?php if (isset($module['icon_color'])) echo ' style="background-color: '. $module['icon_color'] .'"'; ?>></div>
                            </div>
                            <input type="text" id="IconColor_<?php echo $module_row; ?>" name="kuler_social_icons_module[<?php echo $module_row; ?>][icon_color]" value="<?php if (isset($module['icon_color'])) echo $module['icon_color']; ?>" size="7" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Facebook</td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][facebook][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][facebook][status]"<?php echo isset($module['facebook']['status']) && $module['facebook']['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                    <td>
                        <input class="inline" type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][facebook][link]" value="<?php echo isset($module['facebook']['link']) ? $module['facebook']['link'] : '' ?>" placeholder="http://www.facebook.com/kulerthemes" size="40" />
                    </td>
                </tr>
                <tr>
                    <td>Twitter</td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][twitter][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][twitter][status]"<?php echo isset($module['twitter']['status']) && $module['twitter']['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                    <td>
                        <input class="inline" type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][twitter][link]" value="<?php echo isset($module['twitter']['link']) ? $module['twitter']['link'] : '' ?>" placeholder="https://twitter.com/kulerthemes" size="40" />
                    </td>
                </tr>
                <tr>
                    <td>Google +</td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][google][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][google][status]"<?php echo isset($module['google']['status']) && $module['google']['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                    <td>
                        <input class="inline" type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][google][link]" value="<?php echo isset($module['google']['link']) ? $module['google']['link'] : '' ?>" placeholder="https://plus.google.com/u/..." size="40" />
                    </td>
                </tr>
                <tr>
                    <td>Youtube</td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][youtube][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][youtube][status]"<?php echo isset($module['youtube']['status']) && $module['youtube']['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                    <td>
                        <input class="inline" type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][youtube][link]" value="<?php echo isset($module['youtube']['link']) ? $module['youtube']['link'] : '' ?>" placeholder="https://youtube.com/user/kulerthemes" size="40" />
                    </td>
                </tr>
                <tr>
                    <td>Pinterest</td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][pinterest][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][pinterest][status]"<?php echo isset($module['pinterest']['status']) && $module['pinterest']['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                    <td>
                        <input class="inline" type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][pinterest][link]" value="<?php echo isset($module['pinterest']['link']) ? $module['pinterest']['link'] : '' ?>" placeholder="https://pinterest.com/..." size="40" />
                    </td>
                </tr>
                <tr>
                    <td>RSS</td>
                    <td width="10">
                        <div class="kuler-switch-btn">
                            <input type='hidden' name='kuler_social_icons_module[<?php echo $module_row; ?>][rss][status]' value='0' />
                            <input type="checkbox" name="kuler_social_icons_module[<?php echo $module_row; ?>][rss][status]"<?php echo isset($module['rss']['status']) && $module['rss']['status'] ? ' checked="checked"' : '' ?>  value="1">
                            <span class="kuler-switch-btn-holder"></span>
                        </div>
                    </td>
                    <td>
                        <input class="inline" type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][rss][link]" value="<?php echo isset($module['rss']['link']) ? $module['rss']['link'] : '' ?>" placeholder="https://domain.com/rss.xml" size="40" />
                    </td>
                </tr>
                <tr>
                    <td><?php echo $entry_sort_order; ?></td>
                    <td><input type="text" name="kuler_social_icons_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
                </tr>
            </table>
        </div>
        <?php $module_row++; ?>
    <?php } ?>
    </form>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var saveUrl = '<?php echo $action; ?>';
    saveUrl = saveUrl.replace(new RegExp('&amp;', 'g'), '&');
    $('#StoreSelector').on('change', function () {
        window.location = saveUrl + '&store_id=' + $(this).val();
    });

    var ColorPicker = (function () {
        return {
            init: function (selector, context) {
                var CP = this;
                CP.$el = $(selector, context || document);

                CP.$el.each(function () {
                    var $cpElement = $(this);
                    $(this).ColorPicker({
                        color: CP.$el.data('defaultColor'),
                        onShow: function (colpkr) {
                            // recalculate position of the color picker
                            var pos = $(this).offset();

                            $(colpkr)
                                .css({
                                    left: pos.left + 20,
                                    top: pos.top + 20
                                })
                                .fadeIn(500);

                            return false;
                        },
                        onHide: function (colpkr) {
                            $(colpkr).fadeOut(500);
                            return false;
                        },
                        onChange: function (hsb, hex, rgb) {
                            $cpElement.find('div').css('backgroundColor', '#' + hex);
                            $($cpElement.data('backgroundColor')).val('#' + hex).trigger('change');
                        }
                    });
                });
            }
        };
    })();

    $(function () {
        ColorPicker.init('.ColorPicker');
    });

    var module_row = <?php echo $module_row; ?>;
    $('.vtabs a').click(function() {
        $('#tab').val($(this).attr('href'));
    }).tabs();
    <?php if($tab) { ?>
    $('.vtabs a[href="<?php echo $tab ?>"]').click();
    <?php } ?>
    function addModule() {
        html  = '<div id="tab-module-' + module_row + '" class="vtabs-content">';
        html += '  <table class="form" style="margin-bottom: 0px;">';

        html += '    <tr>';
        html += '      <td><?php echo $entry_status; ?></td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td><?php echo $entry_showtitle; ?></td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][show_title]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][show_title]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '        <td><?php echo $entry_title; ?></td>';
        html += '        <td>';
        html += '            <?php foreach ($languages as $language) { ?>';
        html += '                <p>';
        html += '                    <input type="text" name="kuler_social_icons_module['+ module_row +'][module_title][<?php echo $language['language_id']; ?>]"<?php if ($language['language_id'] == $config_admin_language_id) { ?> class="ModuleTitle" data-shortcode="#ModuleShortCode_'+ module_row +'"<?php } ?> />';
        html += '                    <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" />';
        html += '                </p>';
        html += '            <?php } ?>';
        html += '        </td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '        <td><?php echo $entry_shortcode; ?></td>';
        html += '        <td>';
        html += '            <input type="text" id="ModuleShortCode_'+ module_row +'" class="ModuleShortCode" name="kuler_social_icons_module['+ module_row +'][shortcode]" readonly="readonly" size="40" />';
        html += '        </td>';
        html += '    </tr>';
        html += '    <tr>';
        html += '      <td><?php echo $entry_layout; ?></td>';
        html += '      <td><select name="kuler_social_icons_module[' + module_row + '][layout_id]">';
        <?php foreach ($layouts as $layout) { ?>
        html += '           <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
        <?php } ?>
        html += '      </select></td>';
        html += '    </tr>';
        html += '    <tr>';
        html += '      <td><?php echo $entry_position; ?></td>';
        html += '      <td><select name="kuler_social_icons_module[' + module_row + '][position]">';
        html += '        <option value="content_top"><?php echo $text_content_top; ?></option>';
        html += '        <option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
        html += '        <option value="column_left"><?php echo $text_column_left; ?></option>';
        html += '        <option value="column_right"><?php echo $text_column_right; ?></option>';
        html += '      </select></td>';
        html += '    </tr>';
        html += '  </table>';

        html += '  <table class="form">';
        html += '    <tr>';
        html += '        <td><?php echo $entry_icon_style ?></td>';
        html += '        <td colspan="2">';
        html += '            <label for="icon_style_'+ module_row +'_1"><input type="radio" name="kuler_social_icons_module['+ module_row +'][icon_style]" id="icon_style_'+ module_row +'_1" value="1" checked="checked" /> Style 1</label> &nbsp;';
        html += '            <label for="icon_style_'+ module_row +'_2"><input type="radio" name="kuler_social_icons_module['+ module_row +'][icon_style]" id="icon_style_'+ module_row +'_2" value="2" /> Style 2</label> &nbsp;';
        html += '            <label for="icon_style_'+ module_row +'_3"><input type="radio" name="kuler_social_icons_module['+ module_row +'][icon_style]" id="icon_style_'+ module_row +'_3" value="3" /> Style 3</label> &nbsp;';
        html += '        </td>';
        html += '    </tr>';
        html += '    <tr>';
        html += '        <td><?php echo $entry_icon_size ?></td>';
        html += '        <td colspan="2">';
        html += '            <label for="icon_size_'+ module_row +'_24"><input type="radio" name="kuler_social_icons_module['+ module_row +'][icon_size]" id="icon_size_'+ module_row +'_24" value="24" checked="checked" /> 24</label> &nbsp;';
        html += '            <label for="icon_size_'+ module_row +'_32"><input type="radio" name="kuler_social_icons_module['+ module_row +'][icon_size]" id="icon_size_'+ module_row +'_32" value="32" /> 32</label> &nbsp;';
        html += '            <label for="icon_size_'+ module_row +'_48"><input type="radio" name="kuler_social_icons_module['+ module_row +'][icon_size]" id="icon_size_'+ module_row +'_48" value="48" /> 48</label> &nbsp;';
        html += '        </td>';
        html += '    </tr>';

        html += '<tr>';
        html += '    <td><?php echo $entry_icon_color; ?></td>';
        html += '    <td>';
        html += '        <div class="color-picker-container">';
        html += '            <div class="color-picker ColorPicker" data-background-color="#IconColor_'+ module_row +'">';
        html += '                <div></div>';
        html += '            </div>';
        html += '            <input type="text" id="IconColor_'+ module_row +'" name="kuler_social_icons_module['+ module_row +'][icon_color]" size="7" />';
        html += '        </div>';
        html += '    </td>';
        html += '</tr>';

        html += '    <tr>';
        html += '      <td>Facebook</td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][facebook][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][facebook][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '      <td><input class="inline" type="text" name="kuler_social_icons_module[' + module_row + '][facebook][link]" size="40" /></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td>Twitter</td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][twitter][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][twitter][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '      <td><input class="inline" type="text" name="kuler_social_icons_module[' + module_row + '][twitter][link]" size="40" /></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td>Google +</td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][google][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][google][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '      <td><input class="inline" type="text" name="kuler_social_icons_module[' + module_row + '][google][link]" size="40" /></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td>Youtube</td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][youtube][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][youtube][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '      <td><input class="inline" type="text" name="kuler_social_icons_module[' + module_row + '][youtube][link]" size="40" /></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td>Pinterest</td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][pinterest][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][pinterest][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '      <td><input class="inline" type="text" name="kuler_social_icons_module[' + module_row + '][pinterest][link]" size="40" /></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td>RSS</td>';
        html += '      <td width="10"><div class="kuler-switch-btn">';
        html += '        <input type="hidden" name="kuler_social_icons_module[' + module_row + '][rss][status]" value="0" />';
        html += '        <input type="checkbox" name="kuler_social_icons_module[' + module_row + '][rss][status]" value="1" checked="checked" />';
        html += '        <span class="kuler-switch-btn-holder"></span></div></td>';
        html += '      <td><input class="inline" type="text" name="kuler_social_icons_module[' + module_row + '][rss][link]" size="40" /></td>';
        html += '    </tr>';

        html += '    <tr>';
        html += '      <td><?php echo $entry_sort_order; ?></td>';
        html += '      <td><input type="text" name="kuler_social_icons_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
        html += '    </tr>';
        html += '  </table>';
        html += '</div>';

        $('#form').append(html);

        $('#module-add').before('<a href="#tab-module-' + module_row + '" id="module-' + module_row + '"><?php echo $text_module; ?> ' + module_row + '&nbsp;<img src="view/image/delete.png" alt="" onclick="$(\'.vtabs a:first\').trigger(\'click\'); $(\'#module-' + module_row + '\').remove(); $(\'#tab-module-' + module_row + '\').remove(); return false;" /></a>');

        $('.vtabs a').click(function() {
            $('#tab').val($(this).attr('href'));
        }).tabs();

        $('#module-' + module_row).trigger('click');
        ColorPicker.init('#tab-module-'+ module_row +' .ColorPicker');

        module_row++;
    }

    (function () {
        var moduleName = '<?php echo $moduleName; ?>';

        function generateShortCode(moduleName, moduleTitle) {
            var shortcode;

            moduleName = moduleName.toLowerCase();
            moduleTitle = moduleTitle.toLowerCase();

            moduleTitle = moduleTitle.replace(/\s+/g, '_');

            return '[' + moduleName + ' ' + moduleTitle + ']';
        }

        // Update the short code when the module title change
        $('#content').on('keyup change', '.ModuleTitle', function () {
            $($(this).data('shortcode')).val(generateShortCode(moduleName, this.value));
        });

        // Select the shortcode when focus
        $('#content').on('click', '.ModuleShortCode', function () {
            this.select();
        });

        $('.ModuleTitle').trigger('change');
    })();

    /* Kuler Site Builder */
    <?php if (isset($ksb_trigger_creation) && $ksb_trigger_creation) { ?>
    (function () {
        $('.add-element').trigger('click');
    })();
    <?php } ?>
    </script>
<?php echo $footer; ?>